<template>
  <div
    v-show="showModal"
    id="modall_area"
    class="animate__animated animate__fadeInDown animate__faster"
  >
    <div id="uploadfilearea">
      <div class="modal-header">
        <button class="btn-close" @click="closeModal">
          <!-- SVG code unchanged -->
        </button>
      </div>

      <UploadDragger
        :prefixId="randomId"
        style="margin-top: 5%; margin-bottom: 5%"
        @file-upload-success="handleUploadSuccess"
        @file-list-change="handleFileListChange"
      />

      <div class="modal-footer">
        <button class="btn-secondary" @click="closeModal">取消</button>

        <button
          :class="canUpload ? 'btn-upload-success' : 'btn-upload-fail'"
          :disabled="!canUpload"
          @click="uploadAndClose"
        >
          确认
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import UploadDragger from "../../components/upload/UploadDragger.vue";
import axios from "axios";

export default {
  components: {
    UploadDragger,
  },

  data() {
    return {
      showModal: false,
      canUpload: false, // 控制上传按钮的激活状态
      fileList: [], //已上传的 文件 列表
      fileNames: [], //已上传的 文件名 列表
    };
  },

  props: {
    showModal: Boolean,
    randomId: String, //uid
  },

  methods: {
    getFileNames() {
      return this.fileList.map((file) => {
        return file.name.split(".").slice(0, -1).join(".");
      });
    },

    closeModal() {
      this.$emit("closemodel");
      this.canUpload = false;
    },

    async syncFileNamesToAPI(fileNames, uid) {
      const timestamp = Date.now() / 1000; // 生成时间戳
      try {
        const response = await axios.post("/api/web/syncfiles", {
          fileNames,
          uid,
          timestamp,
        });
        console.log("文件名已同步到API:", response.data);
      } catch (error) {
        console.error("同步文件名到API时发生错误:", error);
      }
    },

    handleUploadSuccess(fileList) {
      console.log("handleUploadSuccess called with fileList:", fileList);
      this.fileList = fileList;
      this.canUpload = this.fileList.length > 0; // 文件上传成功后，根据文件列表长度激活上传按钮
      this.fileNames = this.getFileNames();

      const fileNames = this.getFileNames(fileList);
      this.$store.dispatch("updateFileNames", fileNames); //更新到全局变量里面 Vuex
      this.syncFileNamesToAPI(fileNames, this.randomId); // 同步文件名到API

      console.log("handleUploadSuccess，文件名", this.fileNames);
    },

    handleFileListChange(fileList) {
      console.log("handleFileListChange called with fileList:", fileList);
      this.fileList = fileList;
      this.canUpload = fileList.length > 0; // 当文件列表变化时，根据文件列表长度激活上传按钮
      this.fileNames = this.getFileNames();

      const fileNames = this.getFileNames(fileList);
      this.$store.dispatch("updateFileNames", fileNames); //更新到全局变量里面 Vuex
      this.syncFileNamesToAPI(fileNames, this.randomId); // 同步文件名到API

      console.log("handleFileListChange，文件名", this.fileNames);
    },

    uploadAndClose() {
      if (this.canUpload) {
        // 执行上传文件的逻辑（如果有必要）
        this.closeModal(); // 关闭模态窗口
      }
    },
  },
};
</script>

<style>
#modall_area {
  display: none;
  position: fixed; /* 固定位置 */
  z-index: 1; /* 确保在顶层 */
  left: 0;
  top: 0;
  width: 100%; /* 全屏宽 */
  height: 100%; /* 全屏高 */
  overflow: auto; /* 如果需要滚动 */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background-color: rgba(0, 0, 0, 0.4); /* 有透明度的黑色 */
}

#uploadfilearea {
  width: 90%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  /* 添加padding和margin调整可视和点击区域 */
  padding: 20px; /* 可根据需要调整内部间距 */
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end; /* 将按钮放置到右边 */
  padding: 1.5rem 1.5rem 1rem;
}

.btn-success {
  background-color: green; /* 上传按钮激活时的颜色 */
}

.btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.25rem;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.btn-close:hover,
.btn-close:focus {
  background-color: #e9e5ff;
}

.modal-footer {
  margin-top: 2vh;
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  justify-content: flex-end;
}

.modal-footer [class*="btn-"] {
  margin-left: 0.75rem;
}

.btn-secondary,
.btn-primary {
  padding: 0.5rem 1rem;
  font-weight: 500;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
}

.btn-primary {
  color: #fff;
  background-color: #1cc972;
  border-color: #1cc972;
  cursor: pointer;
}

.btn-upload-success {
  padding: 0.5rem 1rem;
  font-weight: 500;
  border: none;
  border-radius: 0.25rem;
  background-color: #1cc972;
  color: #fff;
  cursor: pointer;
}

.btn-upload-fail {
  padding: 0.5rem 1rem;
  font-weight: 500;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
}
</style>
